<template>
	<scroll-view scroll-y @scroll="onPageScroll" style="height: 100vh">
		<div class="home-container">
			<div class="nav-header">
				<u-notice-bar
					mode="horizontal"
					bg-color="#000"
					color="#fff"
					:list="notice"
					font-size="24"
					padding="12rpx 14rpx"
				>
				</u-notice-bar>
			</div>
			<div class="banner">
				<div class="zhuanpan">
					<div class="banner-bottom"></div>
					<div class="banner-middle"></div>
					<div class="banner-top"></div>
					<div class="taiji"></div>
				</div>
				<div class="star"></div>
				<div class="report-wrap flex items-center justify-between">
					<scroll-view
						scroll-y
						class="buyer-scroll"
						:scroll-top="scrollTop"
						scroll-with-animation="true"
					>
						<div class="buyer-box">
							<div
								class="buyer-item flex items-center"
								v-for="(item, index) in userList"
								:key="index"
							>
								<div class="cover-img">
									<img
										class="avatar-icon"
										:src="item && item.inUser.avatar"
										alt=""
									/>
								</div>
								<div class="info-card">
									<p class="font">2分钟前 {{ item && item.inUser.nickname }}</p>
									<p class="font">成功下单 打了100分好评</p>
								</div>
							</div>
						</div>
					</scroll-view>

					<div class="text-box">
						<p class="font">
							已有<span class="num">{{ userList.length }}</span
							>人
						</p>
						<p class="font">领取生辰祥批</p>
					</div>
				</div>
			</div>
			<div class="home-content">
				<div class="btn-wrap">
					<img
						@click="goCalculate"
						class="test-btn"
						src="../../static/images/home/post_btn.png"
						alt=""
					/>
				</div>
				<img
					class="bg-img bg-img1"
					src="../../static/images/home/bg_img1.png"
					alt=""
				/>
				<img
					class="bg-img bg-img2"
					src="../../static/images/home/bg_img2.png"
					alt=""
				/>
				<img
					class="bg-img bg-img3"
					src="../../static/images/home/bg_img3.png"
					alt=""
				/>
				<img
					class="bg-img bg-img4"
					src="../../static/images/home/bg_img4.png"
					alt=""
				/>
				<div class="bottom-info">
					<p class="font">成都卓绘网络科技有限公司</p>
					<div class="service-row flex items-center justify-center">
						<img
							class="service-icon"
							src="../../static/images/home/service.png"
							alt=""
						/>
						<p class="font">联系专属售后客服</p>
					</div>
				</div>
			</div>
			<div class="bottom-btn" v-if="showBtn">
				<img
					@click="goCalculate"
					class="test-btn"
					src="../../static/images/home/post_btn.png"
					alt=""
				/>
			</div>
		</div>
	</scroll-view>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import { useUserStore } from '@/stores/user';
import cache from '@/utils/cache';
import * as accountApi from '@/api/account';

// #ifdef H5
import wechatOa from '@/utils/wechat';
// #endif

const notice = [
	'我平台所有测试仅供娱乐，不得作为生活、工作之指导。我平台产品拒绝向未成年人提供服务，如未成年人使用且造成一切后果由其监护人自行承担。',
];

const scrollTop = ref(0); // 用户滑动scroll

const userList: any = ref([]);

const showBtn = ref(false); // 底部btn
const userStore = useUserStore();

onMounted(() => {
	const userLen = userList.value.length;
	setInterval(() => {
		scrollTop.value += 60;
		if (scrollTop.value >= userLen * 60) {
			scrollTop.value = 0;
		}
	}, 1500);
});

const share = async () => {
	let msg = {
		shareTitle: '生辰综合详批',
		shareLink: 'https://smxcx.ricking.cn/mobile/',
		shareImage: 'https://smapi.ricking.cn/share.png',
		shareDesc: '立即测算',
	};
	wechatOa.share(msg);
};
share();

const onPageScroll = (e: any) => {
	const { scrollTop } = e.detail;
	if (scrollTop >= 632) {
		showBtn.value = true;
	} else {
		showBtn.value = false;
	}
};

// 订单列表
const getOrderLists = async () => {
	const res = await accountApi.orderLists();
	// userList.value = res.lists;
	// console.log('订单列表', res.lists);
};
// getOrderLists();

// 跳转测算表单
const goCalculate = async () => {
	let token = cache.get('token');
	if (!token) {
		wechatOa.getUrl();
	} else {
		setTimeout(() => {
			uni.navigateTo({ url: '/pages/calculate/index' });
		}, 300);
	}
};

onLoad(async (options) => {
	// if (userStore.isLogin) {
	//     // 已经登录 => 首页
	//     uni.reLaunch({
	//         url: '/pages/index/index'
	//     })
	//     return
	// }
	// #ifdef H5
	const { code } = options;
	if (code) {
		uni.showLoading({
			title: '请稍后...',
		});
		try {
			const data: any = await wechatOa.authLogin(code);
			cache.set('token', data.token);
			uni.hideLoading();
			// setTimeout(() => {
			// 	uni.navigateTo({ url: '/pages/calculate/index' });
			// }, 300);
		} catch (error: any) {
			uni.hideLoading();
			uni.redirectTo({
				url: '/pages/index/index',
			});
			throw new Error(error);
		}
	}
	// #endif
});
</script>

<style lang="scss" scoped>
.home-container {
	background-color: #5a6fab;
	min-height: 100vh;

	.banner {
		@apply relative;
		width: 100%;
		height: 521px;
		background: url('../../static/images/home/bg_img.png') no-repeat;
		background-size: 100% 100%;
		z-index: 10;

		.zhuanpan {
			@apply absolute;
			width: 465px;
			height: 465px;
			margin: -200px -230px;
			z-index: 1;

			.banner-bottom {
				@apply w-full h-full relative;
				background: url('../../static/images/home/zhuanpan_bottom.png')
					no-repeat;
				background-size: 100% 100%;
				z-index: 1;
				animation: bottomRorating 10s linear infinite;
			}

			.banner-middle {
				width: 345px;
				height: 345px;
				background: url('../../static/images/home/zhuanpan_middle.png')
					no-repeat;
				background-size: 100% 100%;
				z-index: 1;
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
				animation: middleRorating 10s linear infinite;
			}

			.banner-top {
				width: 234px;
				height: 234px;
				background: url('../../static/images/home/zhuanpan_top.png') no-repeat;
				background-size: 100% 100%;
				position: absolute;
				top: 50%;
				left: 50%;
				z-index: 1;
				transform: translate(-50%, -50%);
				animation: topRorating 10s linear infinite;
			}

			.taiji {
				width: 210rpx;
				height: 210rpx;
				background: url('../../static/images/home/taiji.png') no-repeat;
				background-size: 100% 100%;
				position: absolute;
				top: 50%;
				left: 50%;
				z-index: 1;
				transform: translate(-50%, -50%);
			}

			@keyframes bottomRorating {
				0% {
					transform: rotate(0);
				}

				100% {
					transform: rotate(360deg);
				}
			}

			@keyframes middleRorating {
				0% {
					transform: translate(-50%, -50%) rotate(0);
				}

				100% {
					transform: translate(-50%, -50%) rotate(-360deg);
				}
			}

			@keyframes topRorating {
				0% {
					transform: translate(-50%, -50%) rotate(0);
				}

				100% {
					transform: translate(-50%, -50%) rotate(360deg);
				}
			}
		}

		.report-wrap {
			@apply absolute w-full box-border overflow-hidden;
			bottom: 10px;
			z-index: 1;
			padding: 0 20px;
			height: 60px;

			.buyer-scroll {
				flex: 1;
				height: 60px;
				overflow: hidden;

				.buyer-box {
					.buyer-item {
						height: 60px;

						.avatar-icon {
							width: 50px;
							height: 50px;
							border-radius: 50%;
						}

						.info-card {
							color: #fff;
							margin-left: 8px;
							font-size: 12px;
						}
					}
				}
			}

			.text-box {
				white-space: nowrap;
				padding: 0 10px;
				color: #fff;
				font-size: 12px;
				border-left: 1px solid rgba(255, 255, 255, 0.3);

				.num {
					color: rgb(255, 224, 120);
				}
			}
		}
	}

	.star {
		@apply absolute;
		top: 220px;
		background: url('../../static/images/home/beidou.png') no-repeat;
		background-size: 100% 100%;
		width: 220px;
		height: 126px;
		z-index: 1;
	}

	.home-content {
		@apply w-full box-border relative;
		padding: 0 10px 80px;

		.bg-img {
			@apply w-full;
			margin-top: 15px;
		}

		.btn-wrap {
			width: 355px;
			height: 69px;
			margin: 0 auto;

			.test-btn {
				width: 355px;
				height: 69px;
				animation: btnScale 0.5s linear alternate infinite;
				text-align: center;
			}

			@keyframes btnScale {
				0% {
					transform: scale(0.9);
				}

				100% {
					transform: scale(1);
				}
			}
		}

		.bottom-info {
			@apply text-center;
			margin-top: 20px;

			.font {
				color: #fff;
				font-size: 13px;
			}

			.service-row {
				margin-top: 20px;

				.service-icon {
					width: 15px;
					height: 15px;
				}

				.font {
					padding-left: 6px;
				}
			}
		}
	}

	.bottom-btn {
		@apply fixed;
		bottom: -34px;
		left: 50%;
		transform: translate(-50%, -50%);
		z-index: 999;

		.test-btn {
			width: 375px;
			height: 69px;
			animation: btnScale 0.5s linear alternate infinite;
		}
	}
}

::v-deep .u-notice-bar {
	position: relative !important;
	z-index: 99;
}
</style>

<style></style>
